<template>
	<Layout>
		<!-- Page Header -->
		<header class="masthead" style="background-image: url('/img/home-bg.jpg')">
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-md-10 mx-auto">
						<div class="site-heading">
							<h1>{{$page.tag.title}}</h1>
						</div>
					</div>
				</div>
			</div>
		</header>

		<!-- Main Content -->
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-md-10 mx-auto">
					<div class="post-preview" v-for="post in $page.tag.posts" :key="post.id">
						<g-link :to="`/post/${post.id}`">
							<h2 class="post-title">{{ post.title }}</h2>
						</g-link>
						<p class="post-meta">
							Posted by
							<a href="#">{{ $page.tag.created_by.firstname + ' ' + $page.tag.created_by.lastname }}</a>
							on {{ post.created_at | filterDate }}
						</p>
						<p>
							<!-- <span v-for="tag in post.node.tags" :key="tag.id">
								<g-link :to="`/tag/${tag.id}`">{{ tag.title }}</g-link>
								<span>&nbsp;&nbsp;</span>
							</span> -->
						</p>
						<hr />
					</div>

					<!-- Pager -->
					<div class="clearfix"><a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a></div>
				</div>
			</div>
		</div>
		<!-- <Pager
			class="pageWraper"
			style="display: flex;justify-content: center;align-items: center;
		margin:20px 0;"
			:info="$page.tag.posts.pageInfo"
		/> -->
	</Layout>
</template>

<page-query>
query($id:ID!){
  tag:strapiTag(id:$id){
    id
    title
	created_by{
	  id
	  firstname
	  lastname
	}
    posts{
      id
      title
	  created_at
	  
    }
  }
}
</page-query>
<script>
import { Pager } from 'gridsome';
import dayjs from 'dayjs';
export default {
	name: 'Tag',
	filters: {
		filterDate(data) {
			return dayjs(data).format('YYYY-MM-DD HH:mm:ss');
		}
	},
	components: {
		Pager
	}
};
</script>

<style></style>
